<template>
  <div class="root">
    <cs-card class="header">
      <el-input size="mini" class="header-input"></el-input>
      <el-input size="mini" class="header-input"></el-input>
      <cs-btn
        type="search"
        btnText="查询"
        @click.native="onSearch"
      />
    </cs-card>
    <cs-card class="body">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-style="iRowStyle"
        :header-row-style="iHeaderRowStyle"
      >
        <el-table-column
          prop="name"
          label="商户名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="商户地址"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="tel"
          label="联系电话"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="type"
          label="商户类型"
          align="center"
        >
          <template #default="{ row }">
            <span v-if="row.type === 1">商户</span>
            <span v-if="row.type === 2">广告商</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="corporation"
          label="企业法人"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          label="成立日期"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
        >
          <template #default="{ row }">
            <span v-if="row.state === 1">正常</span>
            <span v-else-if="row.state === 0">拒绝</span>
            <span v-else>待审核</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template #default="{ row }">
            <el-link type="primary" v-if="row.state !== 1">审核</el-link>
            <el-link type="primary" @click="showDetail(row)">详情</el-link>
            <el-link type="primary">隶属小区</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div id="pagination_section_G">
        <span class="currentSelect_G">{{ `共${totalCount}项` }}</span>
        <div class="pagination_right_G">
          <span>{{ `${pageSize}条/页` }}</span>
          <cs-pagination :currentPage="currentPage" :totalPage="totalPage"/>
        </div>
      </div>
    </cs-card>
    <el-dialog
      class="dialog"
      title="商户详情"
      :visible.sync="detailDialogVisible"
      width="60%"
      :before-close="handleDetailClose"
    >
      <div class="desc">
        <el-image
          style="width: 206px; height: 275px"
          :src="businessInfo.pic"
        ></el-image>
        <ul class="desc-info">
          <li><span class="info-title">商 户 ID</span>
            <el-input v-model="businessInfo.id" size="mini" disabled></el-input>
          </li>
          <li><span class="info-title">登记机关</span>
            <el-input v-model="businessInfo.register" size="mini" disabled></el-input>
          </li>
          <li><span class="info-title">商户名称</span>
            <el-input v-model="businessInfo.name" size="mini" disabled></el-input>
          </li>
          <li><span class="info-title">成立日期</span>
            <el-input v-model="businessInfo.date" size="mini" disabled></el-input>
          </li>
          <li><span class="info-title">商户编号</span>
            <el-input v-model="businessInfo.number" size="mini" disabled></el-input>
          </li>
          <li><span class="info-title">经营范围</span>
            <el-input v-model="businessInfo.scope" size="mini" disabled></el-input>
          </li>
          <li><span class="info-title">商户类型</span>
            <el-input v-model="businessInfo.type" size="mini" disabled></el-input>
          </li>
          <li><span class="info-title">注册资本</span>
            <el-input v-model="businessInfo.capital" size="mini" disabled></el-input>
          </li>
          <li><span class="info-title">企业法人</span>
            <el-input v-model="businessInfo.corporation" size="mini" disabled></el-input>
          </li>
          <li><span class="info-title">商户地址</span>
            <el-input type="textarea" v-model="businessInfo.address" size="mini" disabled></el-input>
          </li>
          <li><span class="info-title">联系电话</span>
            <el-input v-model="businessInfo.tel" size="mini" disabled></el-input>
          </li>
        </ul>
      </div>
      <span slot="footer">
        <cs-btn class="dialog-btn" type="primary" btnText="确 定" @click="detailDialogVisible = false"></cs-btn>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import CsBtn from '@/components/CsBtn/CsBtn.vue'
import CsCard from '@/components/CsCard/CsCard'
import CsPagination from '@/components/CsPagination/CsPagination'

export default {
  name: 'Business',
  components: {
    CsBtn,
    CsCard,
    CsPagination
  },
  props: {},
  data() {
    return {
      tableData: [{
        id: 100001,
        date: '2015-09-25',
        name: 'BSK物业',
        address: '广西壮族自治区北海市银海区广东南路178',
        tel: '18169797752',
        type: 1,
        corporation: '孙诚',
        state: 1
      }, {
        id: 100002,
        date: '2015-09-25',
        name: '广西牛利公司',
        address: '广西壮族自治区北海市银河创业园B区',
        tel: '18077961777',
        type: 1,
        corporation: '孔祥辉',
        state: 2
      }, {
        id: 100003,
        date: '2015-09-25',
        name: '英博物业服务有限公司',
        address: '广西壮族自治区北海市云南路165号恒秀花',
        tel: '18677967752',
        type: 1,
        corporation: '刘建伟',
        state: 1
      }, {
        id: 100004,
        date: '2015-09-25',
        name: '海韵居',
        address: '广西壮族自治区北海市西南大道56号',
        tel: '18677967752',
        type: 1,
        corporation: '五人',
        state: 0
      }, {
        id: 100005,
        date: '2015-09-25',
        name: '名都·公园1号',
        address: '广西壮族自治区北海市广西北海市合浦县廉州',
        tel: '18077025310',
        type: 1,
        corporation: '高家智',
        state: 1
      }, {
        id: 100006,
        date: '2015-09-25',
        name: '武汉尚文物业有限公司',
        address: '湖北省武汉市欢乐新城小区',
        tel: '18077025310',
        type: 1,
        corporation: '刘银早',
        state: 1
      }, {
        id: 100007,
        date: '2015-09-25',
        name: '武汉研几科技有限公司',
        address: '湖北省武汉市东湖高新区花城大道9号',
        tel: '18077025310',
        type: 2,
        corporation: '刘力源',
        state: 1
      }, {
        id: 100008,
        date: '2015-09-25',
        name: '广西智健物业服务有限公司',
        address: '广西壮族自治区北海市银海区广东南路229',
        tel: '18077025310',
        type: 1,
        corporation: '方金万',
        state: 1
      }, {
        id: 100009,
        date: '2015-09-25',
        name: '北海市金帝物业服务有限公司',
        address: '广西壮族自治区北海市上海路与茶亭路交汇处',
        tel: '18077025310',
        type: 1,
        corporation: '董奎武',
        state: 1
      }, {
        id: 1000010,
        date: '2015-09-25',
        name: '广西栢荣物业服务有限公司',
        address: '广西壮族自治区北海市银海区银滩大道5号昊',
        tel: '18077025310',
        type: 1,
        corporation: '赵玉玲',
        state: 1
      }],
      // 当前页码
      currentPage: 1,
      // 一页的条数
      pageSize: 10,
      // 总共多少条数据
      totalCount: 0,
      // 总共多少页
      totalPage: 0,
      currentSelect: 0,
      // 弹窗状态
      detailDialogVisible: false,
      // 商户详情
      businessInfo: {
        id: 402022021266501521,
        register: '北海市工商行政管理局银海分局',
        name: 'BSK物业',
        date: '2015-09-25',
        number: 800900000003,
        scope: '物业服务、房屋租赁代理',
        type: '物业',
        capital: 60,
        corporation: '孙诚',
        address: '广西壮族自治区北海市银海区广东 南路17',
        tel: '18077025310',
        pic: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
      }
    }
  },
  created() {
  },
  mounted() {
  },
  computed: {},
  watch: {},
  methods: {
    iRowStyle({ row, rowIndex }) {
      return {
        height: '50px'
      }
    },
    iHeaderRowStyle({ row, rowIndex }) {
      return {
        height: '50px'
      }
    },
    onSearch() {
      console.log('查询')
    },
    showDetail(row) {
      this.detailDialogVisible = true
      console.log('弹窗数据', row)
    },
    handleDetailClose() {
      this.detailDialogVisible = false
      console.log('关闭详情弹窗')
    }
  }
}
</script>

<style lang="scss" scoped>
.root {
  padding: 25px;

  .header {
    display: flex;
    padding: 30px 70px;

    .header-input {
      width: 300px;
      margin-right: 16px;
    }
  }

  .body {
    margin-top: 26px;

    .el-link {
      margin-right: 16px;
    }
  }

  ::v-deep.el-dialog {
    border-radius: 10px;

    .el-dialog__footer{
      text-align: center;
    }
    .desc {
      display: flex;
      justify-content: space-around;
      .desc-info {
        display: flex;
        flex-wrap: wrap;
        width: 65%;
        justify-content: space-between;

        li {
          display: flex;
          align-items: center;
          width: 300px;

          .info-title {
            margin-right: 20px;
            width: 100px;
          }
        }
      }
    }
    .dialog-btn {
      width: 178px;
    }
  }
}

</style>
